<script setup lang="ts">
import {ref,onMounted} from 'vue'
import axios from "axios";
import {useRouter} from "vue-router";
const router = useRouter();
const go = (item)=>{
  let userId = localStorage.getItem('user_id')
  item.userId = userId
  router.push({
    path:'/user/sportdetail',
    query:{item:JSON.stringify(item)}
  })
}
const sportList = ref([])
const getSport = ()=>{
  return axios.post('http://localhost:8000/sport/get_one',{}).then(res => {
    let data = res.data
    if(data.code===200){
      sportList.value = data.data
    }
  })
}

onMounted(()=>{
  getSport().then(()=>{

  })
})
</script>

<template>
<div class="w-full h-full">
  <div class="w-2/3 m-auto grid grid-cols-3 gap-3">
    <div v-for="item in sportList" :key="item.id">
      <el-card  class="w-full h-full rounded-2xl hover:cursor-pointer " @click="()=>{go(item)}">
        <img :src="item.pic" style="width: 100%;height: 200px">
        <div class="flex justify-around mt-3">
          <span class="text-xl">
          {{item.name}}
          </span>
          <el-tag>
            {{item.cate}}
          </el-tag>
        </div>
      </el-card>
    </div>

  </div>
</div>
</template>

<style scoped>

</style>